<template>
  <div class="app-container">
    <div class="page">
      <div class="header">
        <div class="word">
          <div class="w1">
            溯源管理系统
          </div>
          <div class="w2">
            在溯源系统中你可以通过产品id，加工id等信息查询到产品的溯源信息，实现产品的溯源
          </div>
          <div class="w2">
            溯源系统是加工系统中重要的一环,它可以为我们提供溯源的信息，为消费者提供更安心的商品
          </div>
        </div>
        <img class="imgDri" src="../static/6dfe9c226f7140708e977ddfa653ba0f_th.jpg">
      </div>
      <div class="index">
        <div class="search">
          <el-input v-model="input3" placeholder="请输入要查询的数据" class="searchIuput">
            <el-select slot="prepend" v-model="select" class="sel3" placeholder="请选择">
              <el-option label="产品id" value="id" />
              <el-option label="加工id" value="driverName" />
              <el-option label="送货单id" value="drivingLicenseNumber" />
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="searchMes()" />
          </el-input>
        </div>
      </div>
      <div class="f">
        <div>
          <el-button class="e" @click="showone()">
            <div class="t">
              <div class="h">原料质检</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showa">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialInspectionMes.staffName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员职位:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialInspectionMes.staffPosition }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">原料名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialInspectionMes.mateiralName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">微生物指标:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialInspectionMes.tinyCreateContent }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">药品残余量:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialInspectionMes.drugResidue }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">检测结果:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialInspectionMes.weigihtOk }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showtwo()">
            <div class="t">
              <div class="h">原料出入库信息</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showb">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialWarehouseMes.staffName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员职位:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialWarehouseMes.staffPosition }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">工厂名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialWarehouseMes.factoryName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">原料名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialWarehouseMes.mateiralName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">原料吨数:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialWarehouseMes.materialWeight }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">是否出库:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ materialWarehouseMes.isOut }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-show="showc">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ processMes.staffName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员职位:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i1">{{ processMes.staffPosition }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">工厂名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i1">{{ processMes.factoryName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ processMes.productName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品吨数:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ processMes.productWeight }}t</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">加工状态:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ processMes.processStatus }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showfor()">
            <div class="t">
              <div class="h">质量信息</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showd">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productInspectMes.staffName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员职位:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productInspectMes.staffPosition }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productInspectMes.productName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品吨数:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productInspectMes.productWeight }}t</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">微生物指标:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productInspectMes.tinyCreateContent }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i1">质检结果:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i1">{{ productInspectMes.weigihtOk }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div> <el-button class="e" @click="showfiv()">
            <div class="t">
              <div class="h">打包信息</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showe">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ packMes.staffName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员职位:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ packMes.staffPosition }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ packMes.productName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">包装方式:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ packMes.packageType }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">包装数量:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ packMes.packageNumber }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">包装吨数:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ packMes.productWeight }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showsix()">
            <div class="t">
              <div class="h">产品出入库信息</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showf">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productWarehouseMes.staffName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">职员职位:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i1">{{ productWarehouseMes.staffPosition }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productWarehouseMes.productName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">包装方式:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productWarehouseMes.packageType }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品数量:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productWarehouseMes.packageNumber }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">是否出库:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ productWarehouseMes.isOut }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <el-button class="e" @click="showseven()">
            <div class="t">
              <div class="h">进货表信息</div>
            </div> <i class="el-icon-arrow-right el-icon--right" />
          </el-button>
          <div v-show="showg">
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">商品名称:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ deMes.deliverGoods }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">加工工厂:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i1">{{ deMes.factoryName }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">派送员:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ deMes.deliverName }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">派送电话:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ deMes.deliverPhone }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="a">
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">产品数量:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ deMes.weightGoods }}</div>
                  </div>
                </div>
              </div>
              <div class="b">
                <div class="c">
                  <div class="j">
                    <div class="i">是否出库:</div>
                  </div>
                </div>
                <div class="d">
                  <div class="k">
                    <div class="i">{{ deMes.isOut }}</div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '../../../utils/request'
export default {
  name: 'Traceability',

  data() {
    return {
      id: '',
      showa: false,
      showb: false,
      showc: false,
      showd: false,
      showe: false,
      showf: false,
      showg: false,
      select: '',
      input3: '',
      productId: '',
      processId: '',
      materialInspectionMes: {
        'inspectionId': '',
        'deliverId': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'mateiralName': '',
        'weightGoods': '',
        'tinyCreateContent': '',
        'drugResidue': '',
        'weigihtOk': '',
        'inspecitonJudge': '',
        'isDelete': '',
        'gmtCreate': '',
        'gmtModified': ''
      },
      materialWarehouseMes: {
        'materialHouseId': '',
        'deliverId': '',
        'factoryId': '',
        'factoryName': '',
        'materialInspectionId': '',
        'materialName': '',
        'mateiralDesc': '',
        'materialWeight': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'isOut': 1,
        'outTime': '',
        'isDelete': 0,
        'gmtCreate': '',
        'gmtModified': ''
      },
      materialInspectionInOutMes: {
        'productHouseId': '',
        'packageId': '',
        'productId': '',
        'productInspectionId': '',
        'productName': '',
        'productDesc': '',
        'productWeight': '',
        'packageType': '',
        'packageNumber': '',
        'remarks': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'isOut': 1,
        'outTime': '',
        'isDelete': 0,
        'gmtCreate': '',
        'gmtModified': ''
      },
      processMes: {
        'packageId': '',
        'producitInspectionId': '',
        'processId': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'productId': '',
        'productName': '',
        'productWeight': '',
        'packageType': '',
        'packageSpecification': '',
        'packageNumber': '',
        'remarks': '',
        'isDelete': 0,
        'gmtCreate': '',
        'gmtModified': ''
      },
      productInspectMes: {
        'inspectionId': '',
        'deliverId': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'mateiralName': '',
        'weightGoods': '',
        'tinyCreateContent': '',
        'drugResidue': '',
        'weigihtOk': '',
        'inspecitonJudge': '',
        'isDelete': '',
        'gmtCreate': '',
        'gmtModified': ''
      },
      packMes: {
        'packageId': '',
        'producitInspectionId': '',
        'processId': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'productId': '',
        'productName': '',
        'productWeight': '',
        'packageType': '',
        'packageSpecification': '',
        'packageNumber': '',
        'remarks': '',
        'isDelete': 0,
        'gmtCreate': '',
        'gmtModified': ''
      },
      productWarehouseMes: {
        'productHouseId': '',
        'packageId': '',
        'productId': '',
        'productInspectionId': '',
        'productName': '',
        'productDesc': '',
        'productWeight': '',
        'packageType': '',
        'packageNumber': '',
        'remarks': '',
        'staffId': '',
        'staffName': '',
        'staffPhone': '',
        'positionId': '',
        'staffPosition': '',
        'isOut': 1,
        'outTime': '',
        'isDelete': 0,
        'gmtCreate': '',
        'gmtModified': ''
      },
      deMes: {},
      materialInspectionId: '',
      materialWarehouseId: '',
      inspectionId: '',
      packageId: '',
      productInspectionId: '',
      productWarehouseId: '',
      traceId: '',
      deId: '',
      openMes: false
    }
  },

  methods: {
    async showone() {
      console.log(this.openMes)
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/material-inspection/getById/' + this.materialInspectionId
        }).then((response) => {
          console.log(response)
          this.materialInspectionMes = response.data
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          }
        })
        this.showa = !this.showa
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    async showtwo() {
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/material-warehouse/getAllByInspectionId/' + this.materialInspectionId
        }).then((response) => {
          console.log(response)
          this.materialInspectionInOutMes = response.data
          if (response.data.isOut == 1) {
            this.productWarehouseMes.isOut = '已出库'
          } else {
            this.productWarehouseMes.isOut = '未出库'
          }
          console.log(this.materialInspectionInOutMes)
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          }
        })
        this.showb = !this.showb
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    async showthr() {
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/process/getById/' + this.processId
        }).then((response) => {
          console.log(response)
          this.processMes = response.data
          console.log(this.processMes)
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          }
        })
        this.showc = !this.showc
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    async showfor() {
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/product-inspection/getById/' + this.productInspectionId
        }).then((response) => {
          console.log(response)
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          } else {
            this.productInspectMes = response.data
          }
        })
        this.showd = !this.showd
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    async showfiv() {
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/port-package/getById/' + this.packageId
        }).then((response) => {
          console.log(response)
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          } else {
            this.packMes = response.data
          }
        })
        this.showe = !this.showe
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    async showseven() {
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/deliver/getById/' + this.deId
        }).then((response) => {
          console.log(response)
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          } else {
            this.deMes = response.data
          }
        })
        this.showg = !this.showg
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    }, async showsix() {
      if (this.openMes) {
        await request({
          method: 'get',
          url: '/prot/product-warehouse/getById/' + this.productWarehouseId
        }).then((response) => {
          console.log(response)
          if (response.data == null) {
            this.$message({
              message: '请先添加后查看',
              type: 'warning'
            })
          } else {
            this.productWarehouseMes = response.data
            if (response.data.isOut == 1) {
              this.productWarehouseMes.isOut = '已出库'
            } else {
              this.productWarehouseMes.isOut = '未出库'
            }
          }
        })
        this.showf = !this.showf
      } else {
        this.$message({
          message: '请先搜索后查看',
          type: 'warning'
        })
      }
    },
    searchMes() {
      if (this.select == 'id') {
        request({
          url: '/prot/trace/getAllByProductId/' + this.input3 + '/1/1',
          method: 'get'
        }).then(response => {
          if (response.statusCode == 20000) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
            console.log(response)
            console.log(response.data.records[0].materialInspectionId + '222222')
            this.productId = response.data.records[0].productId
            this.processId = response.data.records[0].processId
            this.materialInspectionId = response.data.records[0].materialInspectionId
            this.inspectionId = response.data.records[0].inspectionId
            this.materialWarehouseId = response.data.records[0].materialWarehouseId
            this.packageId = response.data.records[0].packageId
            this.productInspectionId = response.data.records[0].productInspectionId
            this.traceId = response.data.records[0].traceId
            this.productWarehouseId = response.data.records[0].productWarehouseId
            this.openMes = true
            this.deId = response.data.records[0].deliverId
            console.log(this.materialInspectionId + '1111111')
          } else {
            this.$message({
              message: '查无此信息，查询失败',
              type: 'warning'
            })
          }
        })
      } else if (this.select == 'driverName') {
        request({
          url: '/prot/trace/getAllByProcessId/' + this.input3 + '/1/1',
          method: 'get'
        }).then(response => {
          if (response.statusCode == 20000) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
            this.productId = response.data.records.productId
            this.processId = response.data.records.processId
            this.materialInspectionId = response.data.records.materialInspectionId
            this.materialWarehouseId = response.data.records.materialWarehouseId
            this.packageId = response.data.records.packageId
            this.productInspectionId = response.data.records.productInspectionId
            this.traceId = response.data.records.traceId
          } else {
            this.$message({
              message: '查无此信息，查询失败',
              type: 'warning'
            })
          }
        })
      } else if (this.select == 'drivingLicenseNumber') {
        request({
          url: '/prot/trace/getAllByDeliverId/' + this.input3,
          method: 'get',
          data: data
        }).then(response => {
          if (response.statusCode == 20000) {
            this.$message({
              message: '查询成功',
              type: 'success'
            })
            this.productId = response.data.records.productId
            this.processId = response.data.records.processId
            this.materialInspectionId = response.data.records.materialInspectionId
            this.materialWarehouseId = response.data.records.materialWarehouseId
            this.packageId = response.data.records.packageId
            this.productInspectionId = response.data.records.productInspectionId
            this.traceId = response.data.records.traceId
          } else {
            this.$message({
              message: '查无此信息，查询失败',
              type: 'warning'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.sel3 {
  width: 100px;
}

.index {
  margin-bottom: 20px;
  width: 95%;
}

.content {
  // width: 100%;
  display: flex;
  justify-content: center;
}

.searchIuput {
  width: 350px;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.header {
  width: 100%;
  height: 350px;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
  background-color: #ffffff;
}

.search {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

.empty {
  width: 600px;
  height: 600px;
}

.page {
  height: 100%;
  width: 100%;
}

.q {
  width: 50%;
  background-color: black;
}

* {
  margin: 0;
  padding: 0;
}

.app-container {
  // background-color: #f3f3f3;
}

.a {
  display: block;
  margin-top: 0px;
  height: 30px;
  background-color: #ffffff;
  border-bottom: 1px solid rgb(135, 206, 250);
  border-left: 1px solid rgb(135, 206, 250);

}

.a1 {
  display: block;
  margin: 0;
  height: 30px;
  background-color: rgb(225, 242, 227);
  border-bottom: 1px solid rgb(135, 206, 250);
  border-left: 1px solid rgb(135, 206, 250);
}

.b {
  display: inline-block;
  // margin: 0;
  margin-top: -18px;
}

.c {
  display: inline-block;
  width: 200px;
  height: 30px;
  // margin: 0
  margin-top: 17px;
  border-right: 1px solid rgb(135, 206, 250);
}

.d {
  display: inline-block;
  border-right: 1px solid rgb(135, 206, 250);
  width: 215.5px;
  height: 30px;
  // margin: 0;
}

.e {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(225, 242, 227);
  width: 831px;
  margin: 0;
  height: 30px;
  border-top: 1px solid rgb(135, 206, 250);
  border-bottom: 1px solid rgb(135, 206, 250);
  border-right: 1px solid rgb(135, 206, 250);
}

.f {
  width: 100%;
  display: flex;
  justify-content: center;
}

.t {
  width: 800px;
  display: inline-block;
}

.g {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.h {
  margin-left: -700px;
}

.i {
  // width: 60px;
  width:40%;
  height: 10px;
  font-size: 13px;
  font-weight: 50;
}

.i1 {
  width: 75px;
  height: 10px;
  font-size: 13px;
  font-weight: 50;
}

.j {
  display: flex;
  height: 26px;
  align-items: center;
  justify-content: flex-end;
  // border: 1px solid black;
}

.k {
  display: flex;
  height: 26px;
  align-items: center;
}
</style>
